<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>井井记事</title>
    <meta name="description" content="井井记事">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="static/assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="static/assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="static/assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="static/assets/css/amazeui.datatables.min.css"/>
    <link rel="stylesheet" href="static/assets/css/app.css">
    <script src="static/assets/js/jquery.min.js"></script>
    <script src="static/crypto-js/core.js"></script>
    <script src="static/crypto-js/sha1.js"></script>
    <script src="static/layer/layer.js"></script>
    <script src="static/jquery-validation-1.19.0/jquery.validate.js"></script>
    <script src="static/jquery-validation-1.19.0/localization/messages_zh.js"></script>
    <style>
        .error{
            color: red;
        }
    </style>

</head>

<body data-type="login">
<script src="static/assets/js/theme.js"></script>
<div class="am-g tpl-g">
    <!-- 风格切换 -->
    <div class="tpl-skiner">
        <div class="tpl-skiner-toggle am-icon-cog">
        </div>
        <div class="tpl-skiner-content">
            <div class="tpl-skiner-content-title">
                选择主题
            </div>
            <div class="tpl-skiner-content-bar">
                <span class="skiner-color skiner-white" data-color="theme-white"></span>
                <span class="skiner-color skiner-black" data-color="theme-black"></span>
            </div>
        </div>
    </div>
    <div class="tpl-login">
        <div class="tpl-login-content">
            <div class="tpl-login-title">注册用户</div>
            <span class="tpl-login-content-info">
                  创建一个新的用户
              </span>


            <form id="registForm" class="am-form tpl-form-line-form tpl-login-content-info" >

                <div class="am-form-group">
                    <!--<label for="name" >用户名</label>-->
                    <input type="text" class="tpl-form-input" id="name" name="name" placeholder="输入用户名">
                </div>

                <div class="am-form-group">
                    <!--<label for="pwd" >密码</label>-->
                    <input type="password" class="tpl-form-input" id="pwd" name="pwd" placeholder="输入密码">
                </div>

                <div class="am-form-group">
                    <!--<label for="repwd" >确认密码</label>-->
                    <input type="password" class="tpl-form-input" id="repwd" name="repwd" placeholder="再次输入密码">
                </div>
                <div class="am-form-group">
                    <label >性别</label>&nbsp;&nbsp;
                    <input type="radio" class="tpl-form-input" name="sex" value="male" checked><label>男</label>
                    <input type="radio" class="tpl-form-input" name="sex" value="female"><label>女</label>

                </div>
                <div class="am-form-group">
                    <input type="text" class="tpl-form-input" id="email" name="email" placeholder="邮箱" required>
                </div>
                <div class="am-form-group">
                    <input type="text" class="tpl-form-input" id="phone" name="phone" placeholder="电话">
                </div>
                <div class="am-form-group">
                    <input type="text" class="tpl-form-input" id="company" name="company" placeholder="公司">
                </div>

                <div class="am-form-group tpl-login-remember-me">
                    <input id="remember-me" type="checkbox">
                    <label for="remember-me">

                        我已阅读并同意 <a href="javascript:;">《用户注册协议》</a>
                    </label>

                </div>

                <div class="am-form-group">

                    <input type="submit" id="registButton" value="注册" class="am-btn am-btn-primary  am-btn-block tpl-btn-bg-color-success  tpl-login-btn"/>

                </div>
            </form>
        </div>
    </div>
</div>
<script src="static/assets/js/amazeui.min.js"></script>
<script src="static/assets/js/app.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

        // click的处理后续和submit的处理后续：click->click响应事件->submit响应事件->submit
        var registButton=$('#registButton');

        $.validator.setDefaults({
            submitHandler: function() {
                //验证通过后注册
                regiest();
            }
        });

        $('#registForm').validate({
            rules:{
                name:{required:true},
                pwd:{required:true,minlength:6,maxlength:16},
                repwd:{required:true,equalTo:"#pwd"},
                email:{required:true,email:true},
                phone:{minlength:11,maxlength:11}
            },
            messages:{
                repwd:{equalTo:"两次输入的密码不一致！"},
                email:{email:"邮件格式不正确！"},
                phone:{minlength:"电话号码必须是11位！",maxlength:"电话号码必须是11位！"}
            }
        });
        function regiest(){
            var pwd=$('#pwd').val();
            pwd=CryptoJS.SHA1(pwd).toString();
            var data={
                name:$("#name").val(),
                pwd:pwd,
                sex:$("input[name='sex']:checked").val(),
                email:$("#email").val(),
                phone:$("#phone").val(),
                company:$("#company").val()
            }
            console.log(data);
            $.ajax({
                type:'post',
                url:'/doRegist',
                //发送的是Json对象
                contentType:'application/json',
                //接收后的数据是Json对象
                dataType:'json',
                data:JSON.stringify(data),
                // data:data,
                success:function(result){
                    debugger;
                    // result=JSON.parse(result);
                    console.log(result);
                    var errmsg="";
                    if (result.validate=="error") {
                        delete result.validate;
                        for (var k in result){
                            errmsg+=k+":"+result[k]+"</br>";
                        }
                        layer.alert(errmsg,{icon:2});
                    }else{
                        window.location.href='/login';
                    }
                },
                error:function(result) {
                    layer.msg("发生异常，请稍后再试！",{icon:2,time:1000});
                    console.log(result);
                }
            });
        }
        // registButton.bind('submit',regiest);
    });
</script>

</body>

</html>